<template>
  <div class="page-container">
    <div class="page-breadcrumb">
      <div class="left">
        <router-link to="/main">
          <div class="back">
            <img src="@/assets/images/back_icon.png" alt="返回按钮" />
          </div>
        </router-link>
        <div class="text">产品管理</div>
      </div>
      <div class="s-input">
        <input
          type="text"
          v-model="searchData.keywords"
          placeholder="请输入名称搜索"
        />
        <img
          src="@/assets/images/search.png"
          alt="搜索按钮"
          @click="searchSub"
        />
      </div>
    </div>
    <div class="page-first-tabs-box">
      <div class="page-first-tabs">
        <div class="tabs-box">
          <ul>
            <li
              :class="{ active: item == thisfirstTypeName }"
              @click="firstTabClick(item)"
              v-for="item in firstKnowType"
              :key="item"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="second-third-box">
        <div class="third-box">
          <span
            :class="{ 'active': item == thissecondTypeName }"
            @click="secondTabClick(item)"
            v-for="item of secondKnowType"
            :key="item"
            >{{ item }}</span
          >
        </div>
      </div>
      <div class="table-list">
        <div class="table-title">
          <span class="bread" v-show="thisfirstTypeName">{{
            thisfirstTypeName
          }}</span>
          <span
            class="bread"
            v-show="thisfirstTypeName && thissecondTypeName"
            >{{ "> " }}</span
          >
          <span class="bread" v-show="thissecondTypeName">{{
            thissecondTypeName
          }}</span>
          <!-- <span
            class="bread"
            v-show="thisfirstTypeName && thissecondTypeName && thisthirdTypeName"
            >{{ "> " }}</span
          >
          <span class="bread" v-show="thisthirdTypeName">{{
            thisthirdTypeName
          }}</span> -->
        </div>
        <!-- <div class="search-thred-box">
          <el-select v-model="thisthirdTypeId" @change="thredSelChange" placeholder="请选择">
            <el-option
              v-for="item in thirdKnowType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div> -->
        <div class="table-box">
          <el-table v-loading="loading" element-loading-text="数据下载中" :data="tableData" stripe style="width: 100%" @cell-click="cellClickHandle">
            <el-table-column type="index" label="序号" width="60px" align="center">
            </el-table-column>
            <!-- <el-table-column
              prop="modelName"
              label="产品类别"
              align="center"
            ></el-table-column> -->
            <el-table-column
              prop="deviceCode"
              label="设备代号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="deviceName"
              label="设备名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="ptName"
              label="任务名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="productionOrg"
              label="生产单位"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="designOrg"
              label="设计单位"
              align="center"
              v-if="false"
            ></el-table-column>
            <el-table-column
              prop="matchOrg"
              label="齐套单位"
              align="center"
            >
              <template v-slot="{ row }">
                <span v-if="row.matchOrg">{{row.matchOrg}}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="deviceNum"
              label="配套数量"
              align="center"
            >
              <template v-slot="{ row }">
                <span v-if="row.deviceNum">{{row.deviceNum}}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="qualityCount"
              label="质量问题"
              align="center"
            >
              <template v-slot="{ row }">
                <el-button class="btn-text" type="text">{{row.qualityCount}}</el-button>
              </template>
            </el-table-column>
             <el-table-column
              prop="technologyCount"
              label="技术状态"
              align="center"
            >
              <template v-slot="{ row }">
                <el-button class="btn-text" type="text">{{row.technologyCount}}</el-button>
              </template>
            </el-table-column>
             <el-table-column
              prop="address"
              label="存放地点"
              align="center"
            >
              <template v-slot="{ row }">
                <el-input
                  class="modify-el-input"
                  v-if="row.edit"
                  v-model="row['address']"
                  placeholder="请输入存放地点"
                  size="small"
                ></el-input>
                <el-tooltip v-else  class="item" effect="dark" :content="row.address" placement="top">
                  <span class="ellipsis">{{row.address}}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
            >
              <template v-slot="{ row }">
                <el-input
                  class="modify-el-input"
                  v-if="row.edit"
                  v-model="row['remark']"
                  placeholder="请输入备注"
                  size="small"
                ></el-input>
                <el-tooltip v-else class="item" effect="dark" :content="row.remark" placement="top">
                  <span class="ellipsis">{{row.remark}}</span>
                </el-tooltip>  
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60" fixed="right">
              <template v-slot="{ row, $index }">
                <div class="btn-list">
                  <div
                    v-if="!row.edit"
                    class="btn-img table-btn hover"
                    @click="editRow(row, $index)"
                    size="small"
                  > 
                    <span class="icon-img edit"></span>
                  </div>
                  <div
                    v-else
                    class="btn-img table-btn hover"
                    @click="saveRow(row, $index)"
                    size="small"
                  >
                    <span class="icon-img save"></span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div class="pagination-box">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :page-size="searchData.pageSize"
            :total="total"
            @current-change="pageCurrentChange"
          >
          </el-pagination>
        </div> -->
      </div>
    </div>
    <list-dialog v-if="listDialogData.modelId" v-bind="listDialogData"  @close="closeListDialog"/>
  </div>
</template>

<script>

import knowledgeApi from "@/apis/overview/knowledge.js";
import UploadAttach from "@/components/UploadAttach.vue";
import { exportFile } from "@/utils/index.js";
import ListDialog from '../notification/ListDialog'

export default {
  components: { UploadAttach, ListDialog },
  name: "product",
  data() {
    this.tempList = []

    return {
      firstKnowType: [],
      secondKnowType: [],
      thisfirstTypeName: "",
      thissecondTypeName: "",
      searchData: {
        classify: "",
        deviceCodes: "",
        keywords: "",
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      tableData: [],
      total: 0,
      listDialogData: {
        modelId: '',
        billTypeCode: '',
        params: {}
      }
    };
  },
  created() {
    this.getProductSelectOne();
  },
  mounted() {},
  methods: {
    //编辑
    editRow(row, index) {
      if (row?.edit === false) {
        // this.tempList[index] = JSON.parse(JSON.stringify(row))
        row.edit = true;
      }
    },
    //保存
    saveRow(row, index) {
      this.$confirm("确定保存该行数据吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          
          const data = {
              deviceCode: row.deviceCode,
              modelId: row.modelId,
              remarks: row.remark,
              storage_location: row.address
            }
            row.edit = false;
            knowledgeApi.updateRemarks(data).then((res) => {
              if (res.code == "200") {
                
                this.getList();
              }
              
            })
        })
        .catch(() => {
          // let temp = this.tempList[index];
          // if (temp) {
          //   Object.assign(row, this.tempList[index]);
          // } else {
          //   row.edit = false
          // }
        });
    },
    // 搜索
    searchSub() {
      this.getList();
    },
    // 获取产品一级分类
    getProductSelectOne() {
      knowledgeApi.productSelectOne().then((res) => {
        if (res.code == "200") {
          let list = res.data;
          this.firstKnowType = res.data;
          if (list && list.length) {
            this.thisfirstTypeName = list[0]
            this.searchData.classify = list[0]
            this.getList();
            this.getDeviceCodeList(list[0]);
          }
        }
      });
    },
    // 一级分类点击
    firstTabClick(name) {
      this.thisfirstTypeName = name;
      this.searchData.classify = name;
      this.searchData.deviceCodes = "";
      this.thissecondTypeName = "";
      this.secondKnowType = [],
      this.getList();
      this.getDeviceCodeList(name);
    },
    // 二级分类点击
    secondTabClick(row) {
      this.thissecondTypeName = row;
      this.searchData.deviceCodes = row
      this.getList();
    },
    // 获取二级分类数据
    getDeviceCodeList(name) {
      knowledgeApi.productSelectTwo({ classify: name }).then((res) => {
        if (res.code == "200") {
          this.secondKnowType = res.data;
        }
      });
    },
    // 获取列表
    getList() {
      this.loading = true
      knowledgeApi.productList(this.searchData).then((res) => {
        if (res.code == "200") {
          let resData = res.data;
          let list = resData
          if (list && list.length) {
            list.map(item=> {
              item.edit = false
            })
            this.tableData = list;
          } else {
            this.tableData = [];
          }
          this.total = resData.total ? resData.total : 0;
        } else {
          this.tableData = [];
          this.total = 0;
          this.$message.error(res.msg);
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      });
    },
    // 翻页
    pageCurrentChange(val) {
      this.searchData.pageNum = val;
      this.getList();
    },
    closeListDialog(refresh) {
      if (refresh) {
        this.getList()
      }
      this.listDialogData.modelId = ''
    },
    cellClickHandle(row, column) {
      const {property} = column
      const billType = {
        'qualityCount': 'QUALITY',
        'technologyCount': 'TECH_NOR_DEV'
      }
      if(row[property] && billType[property]) {
         let listDialogData = {
          modelId: row.modelId,
          billTypeCode: billType[property],
          params: {
            deviceCode: row.deviceCode
          }
        }
        this.listDialogData = listDialogData
      }
    }
  },
};
</script>

<style scoped lang="scss">
.page-container {
  .page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    width: 100%;
    padding: 0 30px;
    background: #f9f9f9;
    .left {
      display: flex;
      .back {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 20px;
        cursor: pointer;
        img {
          width: 30px;
          height: 20px;
        }
      }
      .text {
        display: flex;
        align-items: center;
        margin-left: 17px;
        font-size: 26px;
        color: #111434;
        font-weight: 400;
      }
    }
    .s-input {
      width: 270px;
      height: 34px;
      background: #f9f9f9;
      border: 1px solid #c6ccd8;
      border-radius: 17px;
      display: flex;
      align-items: center;
      padding: 0 18px;
      input {
        height: 100%;
        flex: 1;
        border: none;
        outline: none;
        font-size: 16px;
        color: #a8adb7;
        background: transparent;
      }
      img {
        width: 21px;
        height: 21px;
        margin-left: 8px;
        cursor: pointer;
      }
    }
  }
  .page-first-tabs-box {
    overflow: hidden; 
    padding: 0 84px;
    background: #f9f9f9;
    box-shadow: 0px 3px 8px 0px rgba(122, 128, 159, 0.1);
  }
  .page-first-tabs {
    width: 100%;
    overflow-x: scroll;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0 40px 0 84px;
     &::-webkit-scrollbar {
      width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
      height: 10px;
    }
    &::-webkit-scrollbar-thumb  {
      /*滚动条里面小方块*/
      border-radius   : 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0.2) 75%,
          transparent 75%,
          transparent
      );
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      background   : #ededed;
      border-radius: 10px;
    }
    .tabs-box {
      ul {
        display: flex;
        li {
          cursor: pointer;
          font-size: 24px;
          color: #505971;
          display: block;
          padding: 13px 10px;
          white-space: nowrap;
          overflow: hidden;
          width: 180px;
          text-align: center;
          text-overflow: ellipsis;
          &.active {
            color: #111434;
            background: #e5ecfa;
            border-bottom: 4px solid #4181ff;
          }
          &:hover {
            color: #111434;
            background: #e5ecfa;
          }
        }
      }
    }
    .add-btn {
      cursor: pointer;
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
  .page-content {
    background: linear-gradient(0deg, #e7e9f2 0%, #e7e9f2 100%);
    // display: flex;
    overflow: hidden;
    .second-third-box {
      padding: 17px 84px 0;
      display: flex;
      .second-third-ul {
        padding: 10px;
        .second-third-li {
          display: flex;
          margin-bottom: 15px;
          .second-s-box {
            cursor: pointer;
            height: 34px;
            // padding: 0 30px;
            width: 108px;
            background: linear-gradient(0deg, #d4dbe8 0%, #f8f9fb 100%);
            border-radius: 3px;
            text-align: center;
            font-size: 18px;
            font-weight: 400;
            color: #505971;
            display: flex;
            align-items: center;
            justify-content: center;
            &.active {
              color: #fff;
              background: linear-gradient(0deg, #185de8 0%, #4885ff 100%);
            }
          }
        }
      }
      .third-box {
        flex: 1;
        // display: flex;
        flex-wrap: wrap;
        font-size: 18px;
        font-weight: 400;
        border: 1px solid #C6CDDC;
        background: #E7E9F2;
        min-height: 56px;
        span {
          display: inline-block;
          cursor: pointer;
          color: #505971;
          padding: 20px 24px;
          &.active {
            color: #285fe3;
          }
          &:hover {
            color: #285fe3;
          }
        }
      }
    }
    .table-list {
      flex: 1;
      padding: 17px 84px;
      .search-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .add-btn {
          cursor: pointer;
          img {
            height: 40px;
            width: 40px;
          }
        }
      }
      .table-title {
        margin: 10px 0;
        h2 {
          font-size: 24px;
          font-weight: 400;
          text-decoration: underline;
          color: #111434;
        }
        .bread {
          color: #111434;
          font-size: 24px;
          font-weight: 400;
          text-decoration: none;
        }
      }
      .search-thred-box {
        margin-bottom: 10px;
        /deep/.el-input__inner {
          background: transparent;
          font-size: 18px;
          border: 1px solid #a8adb7;
        }
      }
      .table-box {
        .option-icon {
          width: 36px;
          height: 36px;
          display: inline-block;
          text-indent: -999px;
          overflow: hidden;
          cursor: pointer;
          &.del {
            background: url("../../../../assets/images/del_btn.png") center
              no-repeat;
            margin-right: 3px;
            &:hover {
              background: url("../../../../assets/images/del_btn_a.png") center
                no-repeat;
              background-size: 100%;
            }
            background-size: 100%;
          }
          &.change {
            background: url("../../../../assets/images/change_btn.png") center
              no-repeat;
            &:hover {
              background: url("../../../../assets/images/change_btn_a.png")
                center no-repeat;
              background-size: 100%;
            }
            background-size: 100%;
          }
        }
        /deep/ .el-table {
          thead {
            tr {
              background: #d8dcea;
            }
            th {
              background: #d8dcea;
              font-size: 20px;
              color: #505971;
            }
          }
          tbody {
            td {
              font-size: 18px;
              color: #111434;
            }
          }
        }
      }
      .pagination-box {
        padding: 10px 0;
        text-align: right;
      }
    }
  }
}
.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.btn-text {
  font-size: 18px;
}
input::-webkit-input-placeholder {
  color: #a8adb7;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #a8adb7;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #a8adb7;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #a8adb7;
}
.el-table {
  background-color: transparent;
}
/deep/.el-table tr {
  position: relative;
  background: #ffffff;
  &.current-row,
  &.hover-row,
  &:hover {
    background-color: #e6edfb;
    td {
      position: relative;
      transition: none;
      background-color: #e6edfb;
      &:first-child {
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 3px;
          background-color: rgb(65, 129, 255);
        }
      }
    }
  }
}
</style>
